<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>商品的页面</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="商品页面common.css">
  <link rel="stylesheet" href="商品页面.css">
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="common.css">
  <script src="../ajax/jquery-3.5.1.min.js"></script>
</head>

<body>
<div class="shortcut">
  <div class="wrapper">
    <i class="avatar"></i>
    <ul>
      <li><a href="登录login.html" id="top">您好！请先登录</a></li>
      <li><a href="注册导航.html">免费注册</a></li>
      <li><a href="index.html">主页</a></li>
      <li><a href="ShopCar.html">购物车</a></li>
      <li><a href="收货中心.html">收货中心</a></li>
      <li><a href="homePage.html">个人中心</a></li>
      <li><a href="视觉介绍.html"><span></span>官网</a></li>
    </ul>
  </div>
</div>
<div class="header wrapper" id="header-pic">
  <div class="logo">
    <h1><a href="#">企业图片</a></h1>
  </div>
  <div class="nav">
    <ul>
      <li> <a href="index.html">首页</a> </li>
      <li> <a href="more_goods.html">电子产品</a> </li>
      <li> <a href="more_goods.html">美妆</a> </li>
      <li> <a href="more_goods.html">服装和鞋帽</a> </li>
      <li> <a href="more_goods.html">珠宝和首饰</a> </li>
      <li> <a href="#">服务中心</a> </li>
    </ul>
  </div>
  <div class="search">
    <input type="text" placeholder="手办">
  </div>
  <div class="car">
    <a href="#"><img src="img/R-C.png" class="car-pic" href="#"></a>
  </div>
</div>
    <!-- 商品信息 -->
    <div class="product-info">
      <div class="left">
        <div class="pictrue">
          <div class="middle">
            <img src="img/nike鞋.png" alt="">
            <div class="layer"></div>`
          </div>
          <div class="large"></div>
        </div>
        <div class="other">
          <ul>
            <li>
              <p>销量人气</p>
              <p>1999+</p>
            </li>
            <li>
              <p>商品评价</p>
              <p>999+</p>
            </li>
            <li>
              <p>收藏人气</p>
              <p>299+</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <h3 class="name">NIKE AIR JORDAN4</h3>
        <p class="desc">气垫设计 / 打球必备 / 完美外观 / 质量保证 /</p>
        <p class="price">¥<span class="now">1299</span><span class="old">¥999</span></p>
        <div class="address">
          <div class="item">
            <div class="dt">促销</div>
            <div class="dd">5月好物放送，现在购买直降300！</div>
          </div>
          <div class="item">
            <div class="dt">配送</div>
            <div class="dd">至
              <div class="box">
                <input type="text" id="input_data" value="重庆财经学院">
              </div>
            </div>
          </div>
          <div class="item">
            <div class="dt">服务</div>
            <div class="dd">
              <span class="fw">无忧退货</span>
              <span class="fw">快速退款</span>
              <span class="fw">免费包邮</span>
              <a href="#" class="lj">了解详情</a>
            </div>
          </div>
        </div>
        <div class="attrs">
          <div class="item">
            <div class="dt">尺寸</div>
            <div class="dd">
              <span class="size border" >迷你版</span>
              <span class="size">正常版</span>
              <span class="size">偏大版</span>
              <span class="size">超大版</span>
            </div>
          </div>
          <div class="item">
            <div class="dt">数量</div>
            <div class="dd">
              <div class="num">
                <a href="javascript:;" class="add1">-</a>
                <input type="text" value="1">
                <a href="javascript:;" class="add2">+</a>
              </div>
            </div>
          </div>
          <div class="item">
            <a class="buy" href="javascript:;">加入购物车</a>
          </div>
        </div>
      </div>
    </div>
<div class="footer ">
  <div class="wrapper">
    <div class="top">
      <ul>
        <li>
          <span>快乐购物</span>
        </li>
        <li>
          <span>分享乐趣</span>
        </li>
        <li>
          <span>收获折扣</span>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <p>
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a> |
        <a href="#">关于我们</a>
      </p>
      <p>CMY @ </p>
    </div>
  </div>
</div>
<script>
  let size="迷你版"
  let tp_data
  let large_img=""
  // 1. 获取三个盒子
  // 2. 小盒子 图片切换效果
  //  中盒子
  const middle = document.querySelector('.middle')
  //  大盒子
  const large = document.querySelector('.large')
  // 2. 事件委托
  // 3. 鼠标经过中等盒子， 显示隐藏 大盒子
  middle.addEventListener('mouseenter', show)
  middle.addEventListener('mouseleave', hide)
  let timeId = null
  // 显示函数 显示大盒子
  function show() {
    // 先清除定时器
    clearTimeout(timeId)
    large.style.display = 'block'
  }
  // 隐藏函数 隐藏大盒子
  function hide() {
    timeId = setTimeout(function () {
      large.style.display = 'none'
    }, 200)
  }


  // 4. 鼠标经过大盒子， 显示隐藏 大盒子
  large.addEventListener('mouseenter', show)
  large.addEventListener('mouseleave', hide)


  // 5. 鼠标经过中等盒子，显示隐藏 黑色遮罩层
  const layer = document.querySelector('.layer')
  middle.addEventListener('mouseenter', function () {
    layer.style.display = 'block'
    large.style.backgroundImage= "url("+`${large_img}`+") "
  })
  middle.addEventListener('mouseleave', function () {
    layer.style.display = 'none'
  })
  // 6.移动黑色遮罩盒子
  middle.addEventListener('mousemove', function (e) {
    // let x = 10, y = 20
    // console.log(11)
    // 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
    // console.log(e.pageX)鼠标在页面中的坐标
    // middle 中等盒子的坐标
    // console.log(middle.getBoundingClientRect().left)
    let x = e.pageX - middle.getBoundingClientRect().left
    let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
    // console.log(x, y)
    // 黑色遮罩移动 在 middle 盒子内 限定移动的距离
    if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
      // 黑色盒子不是一直移动的
      // 声明2个变量 黑色盒子移动的 mx my变量
      let mx = 0, my = 0
      if (x < 100) mx = 0
      if (x >= 100 && x <= 300) mx = x - 100
      if (x > 300) mx = 200

      if (y < 100) my = 0
      if (y >= 100 && y <= 300) my = y - 100
      if (y > 300) my = 200

      layer.style.left = mx + 'px'
      layer.style.top = my + 'px'
      // 大盒子的背景图片要跟随 中等盒子移动  存在的关系是 2倍
      large.style.backgroundPositionX = -2 * mx + 'px'
      large.style.backgroundPositionY = -2 * my + 'px'
    }
  })
  const add1=document.querySelector('.product-info .right .attrs .num .add1')
  const add2=document.querySelector('.product-info .right .attrs .num .add2')
  const inputadd=document.querySelector('.product-info .right .attrs .num input')
  const span=document.querySelector('.attrs .item:nth-child(1) .dd')
  const address=document.querySelector('.box input')
  console.log(inputadd)
  span.addEventListener('click',function (e){
    e.preventDefault()
    console.log(this)
    if (e.target.tagName==='SPAN'){
      this.querySelector('.border').classList.remove('border')
      e.target.classList.add('border')
      size=document.querySelector('.border').innerHTML
    }
  })
  let i=1
  add2.addEventListener('click',function (){
    i++
    inputadd.value=i
  })
  add1.addEventListener('click',function (){
    if (i>1){
      i--
    }
    inputadd.value=i
  })
  const uname=JSON.parse(sessionStorage.getItem('YM'))
  const FirstLi=document.querySelector('.shortcut ul li:nth-child(1)')
  const SecondLi=FirstLi.nextElementSibling
  function render(){

    if (uname){
      FirstLi.innerHTML=`<a href="javascript:;"><i class="iconfont"><img src="img/用户-角色-用户名-单人_jurassic.jpg" alt="" height="30">${uname.name}</i></a>`
      SecondLi.innerHTML=`<a href="javascript:;">退出登录</a>`
    }
    else{
      FirstLi.innerHTML=`<a href="登录login.html">您好！请先登录</a>`
      SecondLi.innerHTML=`<a href="注册导航.html">免费注册</a>`

    }
  }
  render()
  $(function (){
    const data=JSON.parse(sessionStorage.getItem('ID'))
    let img=$(".middle img")
    let name=$(".right .name")
    let info=$(".right .desc")
    let price_now=$(".right .price .now")
    let price_old=$(".right .price .old")
    $.ajax({
      url:'http://127.0.0.1:5000/shopping',
      type:'get',
      data:{"ID":data[0].ID  ,"type":data[0].type },
      success:function (pros){
        large_img=pros[0].img
          img.attr("src",pros[0].img).css("width","100%")
          name.text(pros[0].name)
          info.text(pros[0].info)
          price_now.text(pros[0].price)
          price_old.text("¥"+parseInt(pros[0].price+500))
          tp_data=[]
          tp_data.push(pros)
          console.log(tp_data)
      }
    })
  })
  const buy=document.querySelector('.buy')
  buy.addEventListener('click',function (){
    if (uname){
      $.ajax({
        url:'http://127.0.0.1:5000/shopcar',
        type:'get',
        data:{"id":tp_data[0][0].id ,"img":tp_data[0][0].img, "info":tp_data[0][0].info,"price":tp_data[0][0].price,"username":uname.username ,"num":inputadd.value,"size":size,"address":address.value,"name":tp_data[0][0].name },
        success:function (pros){
          if (pros==="true"){
            location.href='ShopCar.html'
          }
        }
      })
    }
    else {
      alert("请先登录")
    }


  })


</script>
</body>

</html>